CSS Image Slider
A CSS Image Slider (also called carousel) displays multiple images one after another with smooth transitions. Image sliders are commonly used in hero sections, product showcases, and banners. You can build them with pure CSS using @keyframes, animation, and a sliding strip of images.
Key Slider Concepts
Slides
Each image inside a wide horizontal strip.
Container
Hides overflow and shows only one image at a time.
@keyframes
Defines the timing — how long each image stays visible.
Animation
Auto-plays the slider continuously.
Loop
Use infinite for endless looping.
Manual (advanced)
Buttons or radio inputs for manual control.
Image Slider Syntax
.slider {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
width: 1800px; /* 3 slides * 600px */
animation: slide 9s infinite;
}
.slides img {
width: 600px;
height: 300px;
object-fit: cover;
}
@keyframes slide {
0%, 30% { transform: translateX(0); }
33%, 63% { transform: translateX(-600px); }
66%, 96% { transform: translateX(-1200px); }
100% { transform: translateX(0); }
}
Image Slider
An image slider in CSS displays multiple images in a slideshow format with smooth transitions, navigation buttons, and interactive controls. It improves user experience and enhances webpage presentation.
Example 1 : Manual Image Slider
This example creates a manual image slider with previous and next navigation buttons.
<html>
<head>
<style>
.mySlides{
display:none;
}
img{
vertical-align:middle;
}
.slideshow-container{
max-width:600px;
max-height:300px;
position:relative;
margin:auto;
}
.prev,.next{
cursor:pointer;
position:absolute;
top:50%;
padding:16px;
margin-top:-22px;
color:white;
font-weight:bold;
font-size:18px;
transition:0.6s ease;
user-select:none;
}
.next{
right:0;
}
.prev:hover,
.next:hover{
background-color:
rgba(0,0,0,0.8);
}
.dot{
cursor:pointer;
height:15px;
width:15px;
margin:0 2px;
background-color:#bbb;
border-radius:50%;
display:inline-block;
}
.active,
.dot:hover{
background-color:#717171;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<img src="imgs/picgalll1.webp"
width="600"
height="300">
</div>
<div class="mySlides">
<img src="imgs/picgalll2.webp"
width="600"
height="300">
</div>
<div class="mySlides">
<img src="imgs/picgalll3.webp"
width="600"
height="300">
</div>
<a class="prev"
onclick="plusSlides(-1)">
❮
</a>
<a class="next"
onclick="plusSlides(1)">
❯
</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n){
showSlides(
slideIndex += n
);
}
function showSlides(n){
var i;
var slides =
document.getElementsByClassName(
"mySlides"
);
if(n > slides.length){
slideIndex = 1;
}
if(n < 1){
slideIndex =
slides.length;
}
for(i = 0;
i < slides.length;
i++){
slides[i].style.display =
"none";
}
slides[slideIndex-1]
.style.display = "block";
}
</script>
</body>
</html>
- display:none: Hides inactive slides.
- position:absolute: Positions navigation buttons.
- JavaScript: Controls slide switching.
Example 2 : Auto Image Slider
This example creates an automatic image slideshow with fading effects.
<html>
<head>
<style>
.mySlides{
display:none;
}
img{
vertical-align:middle;
}
.slideshow-container{
max-width:600px;
position:relative;
margin:auto;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
@keyframes fade{
from{
opacity:.4;
}
to{
opacity:1;
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="imgs/picgalll1.webp"
width="600"
height="300">
</div>
<div class="mySlides fade">
<img src="imgs/picgalll2.webp"
width="600"
height="300">
</div>
<div class="mySlides fade">
<img src="imgs/picgalll3.webp"
width="600"
height="300">
</div>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var i;
var slides =
document.getElementsByClassName(
"mySlides"
);
for(i = 0;
i < slides.length;
i++){
slides[i].style.display =
"none";
}
slideIndex++;
if(slideIndex > slides.length){
slideIndex = 1;
}
slides[slideIndex-1]
.style.display = "block";
setTimeout(showSlides,2000);
}
</script>
</body>
</html>
- @keyframes fade: Creates fade animation.
- setTimeout(): Changes slides automatically.
- animation-duration: Controls transition speed.
Conclusion
CSS image sliders improve webpage interaction by displaying multiple images dynamically. They provide smooth animations, better presentation, and enhanced user experience for modern websites.
Full Image Slider Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Slider</title>
<style>
body {
display: flex;
justify-content: center;
padding: 40px;
background: #f5f7fa;
font-family: Arial;
}
.slider {
width: 600px;
height: 320px;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
position: relative;
}
.slides {
display: flex;
width: 1800px;
animation: slide 9s infinite;
}
.slides div {
width: 600px;
height: 320px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 30px;
font-weight: bold;
}
.s1 { background: linear-gradient(135deg, #1a73e8, #00bcd4); }
.s2 { background: linear-gradient(135deg, #d81b60, #ff8a65); }
.s3 { background: linear-gradient(135deg, #4CAF50, #cddc39); }
@keyframes slide {
0%, 30% { transform: translateX(0); }
33%, 63% { transform: translateX(-600px); }
66%, 96% { transform: translateX(-1200px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<div class="s1">Slide 1</div>
<div class="s2">Slide 2</div>
<div class="s3">Slide 3</div>
</div>
</div>
</body>
</html>
Code Explanation
overflow: hidden: Hides slides outside the visible area..slides: A wide strip containing all slides horizontally.@keyframes slide: Defines the movement at different time points.transform: translateX(): Moves the strip to show different slides.animation: slide 9s infinite: Loops the slider forever — 3s per slide.
Slider Building Blocks
| Element | CSS Used | Purpose |
|---|---|---|
| Container | overflow: hidden |
Hides off-screen slides |
| Strip | display: flex; width: Nx |
Holds all slides in a row |
| Slide | width: 100% |
Each individual slide |
| Animation | @keyframes |
Defines slide timing |
| Loop | infinite |
Endless animation |
Slider Patterns
Auto Slider
Automatic slide with @keyframes animation.
Manual Slider
Use radio inputs and :checked for navigation.
Pagination Dots
Small dots show current slide position.
Slider Properties
Important Notes
- Use object-fit: cover: Keeps images proportional inside fixed dimensions.
- Match slide count to width: Total strip width = number of slides × slide width.
- Accessibility: Provide alt text and pause-on-hover for users with motion sensitivity.
- For complex sliders use JS: Pure CSS sliders are simple — JS gives full interactive control.
Real-World Use Cases
Hero Banners
Landing page slideshow with promotional content.
Product Showcase
Highlight product images on e-commerce sites.
Photo Gallery
Auto-playing gallery for portfolios.
Practice Questions
- Build a slider with 4 slides that change every 3 seconds.
- Add a 1-second smooth transition between slides.
- Make the slider responsive using percentage widths.
- Pause the slider on hover using
animation-play-state. - Add a fade transition instead of slide using opacity keyframes.
Frequently Asked Questions
- Can I make a slider with only CSS: Yes — using
@keyframesandtransform: translateX()for automatic slideshows. - How to pause animation on hover: Use
animation-play-state: pausedon hover. - How to add manual controls: Use radio inputs with the
:checkedpseudo-class or JavaScript for full control. - How to make slider responsive: Use percentage widths and viewport units instead of fixed px values.
Conclusion
A CSS Image Slider showcases multiple visuals in a compact space. With nothing more than @keyframes, transform, and overflow: hidden, you can create a smooth, professional carousel for any website.
CSS All Topics
Continue Learning
Previous
Go to Login Page Chapter